<template>
  <view class="review-management">
    
    <view class="search-bar">
      <view class="search-input">
        <text class="search-icon">🔍</text>
        <input type="text" placeholder="搜索用户或服务" v-model="searchQuery" />
      </view>
    </view>
    
    <view class="filter-section">
      <view class="filter-tabs">
        <view 
          v-for="(tab, index) in filterTabs" 
          :key="index"
          class="filter-tab"
          :class="{ active: activeTab === index }"
          @click="activeTab = index"
        >
          {{ tab }}
        </view>
      </view>
    </view>
    
    <view class="review-list">
      <view v-for="(review, index) in filteredReviews" :key="index" class="review-item" @click="navigateToOrderDetail(review)" style="cursor: pointer;">
        <view class="review-header">
          <view class="user-info">
            <image class="user-avatar" :src="review.avatar || 'https://ts1.tc.mm.bing.net/th/id/OIP-C.p6hdmBEvZCMwVcWDVnQr0QAAAA?w=206&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2' "></image>
            <view class="user-details">
              <text class="user-name">{{ review.nickName }}</text>
              <text class="review-time">{{ review.createTime }}</text>
            </view>
          </view>
          <view class="service-code">
            {{ review.orderId }}
          </view>
        </view>
        
        <view class="star-rating">
          <view class="rating-container">
            <text class="rating-label">综合评分：</text>
            <view class="stars">
              <text 
                v-for="n in 5" 
                :key="n"
                class="star"
                :class="{ active: n <= review.rate }"
              >
                ★
              </text>
            </view>
            <text class="rating-score">{{ review.rate }}</text>
          </view>
        </view>
        
        <view class="review-content">
          <text class="content-text">{{ review.content }}</text>
        </view>
        
        <view class="service-info">
          <text class="service-label">服务内容：</text>
          <text class="service-text">{{ review.orderServiceDTO?.introduction || '' }}</text>
        </view>
        

      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed,onMounted } from 'vue';
import request from '@/utils/request';

const searchQuery = ref('');
const activeTab = ref(0);

const filterTabs = ['全部', '好评', '中评', '差评'];

// 跳转到订单详情页面
const navigateToOrderDetail = (review: any) => {
  // 跳转到订单详情页面并传递review对象
  uni.navigateTo({
    url: `/pages/order/orderDetail?orderNumber=${review.orderId}`,
    success: function(res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('acceptReviewData', { review: review });
    }
  });
};

// 模拟评价数据
const reviews = ref([
  {
    nickName: '张**',
    createTime: '2022-10-10 11:09',
    orderId: '2021010831213',
    rate: 3,
    content: '',
    introduction: 'XXX标准洗车服务包含整车泡沫冲洗擦干',
    avatar: '',
    orderServiceDTO: { introduction: 'XXX标准洗车服务包含整车泡沫冲洗擦干' }
  },
  {
    nickName: '李**',
    createTime: '2022-10-09 14:30',
    orderId: '2021010831214',
    rate: 5,
    content: '服务非常好，洗车很干净，工作人员态度热情！',
    introduction: 'XXX标准洗车服务包含整车泡沫冲洗擦干',
    avatar: '',
    orderServiceDTO: { introduction: 'XXX标准洗车服务包含整车泡沫冲洗擦干' }
  },
  {
    nickName: '王**',
    createTime: '2022-10-08 09:15',
    orderId: '2021010831215',
    rate: 4,
    content: '整体还不错，就是等待时间稍微有点长。',
    introduction: 'XXX标准洗车服务包含整车泡沫冲洗擦干',
    avatar: '',
    orderServiceDTO: { introduction: 'XXX标准洗车服务包含整车泡沫冲洗擦干' }
  },
  {
    nickName: '赵**',
    createTime: '2022-10-07 16:45',
    orderId: '2021010831216',
    rate: 2,
    content: '洗车效果一般，有些地方没有洗干净。',
    introduction: 'XXX标准洗车服务包含整车泡沫冲洗擦干',
    avatar: '',
    orderServiceDTO: { introduction: 'XXX标准洗车服务包含整车泡沫冲洗擦干' }
  }
]);

// 筛选后的评价列表
const filteredReviews = computed(() => {
  let result = [...reviews.value];
  
  // 根据标签筛选
  if (activeTab.value === 1) {
    result = result.filter(review => review.rate >= 4);
  } else if (activeTab.value === 2) {
    result = result.filter(review => review.rate === 3);
  } else if (activeTab.value === 3) {
    result = result.filter(review => review.rate <= 2);
  }
  
  // 根据搜索词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    result = result.filter(review => 
      review.nickName?.toLowerCase().includes(query) ||
      review.orderId?.toLowerCase().includes(query) ||
      review.orderServiceDTO?.introduction?.toLowerCase().includes(query) ||
      (review.content && review.content.toLowerCase().includes(query))
    );
  }
  
  return result;
});

// 导航返回
const navigateBack = () => {
  uni.navigateBack();
};

const getReviews = async () => {
  // 显示加载提示
  uni.showLoading({
    title: '加载中...'
  });
  request({
    url: '/wsy/evaluate/list',
    method: 'GET',
    data: {
      merchantId: 1 // 传递商户ID参数
    }
  }).then((res) => {
    // 隐藏加载提示
    uni.hideLoading();
    // 数据获取完成后，更新订单列表
    console.log('评价数据:', res.data);
    // 确保res是数组格式
    reviews.value = Array.isArray(res.data) ? res.data : [];
  }).catch((error) => {
    console.error('获取评价数据失败:', error);
  });
}
onMounted(() => {
  getReviews();
});


</script>

<style scoped>
.review-management {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background-color: #fff;
  padding: 0 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 20px;
  color: #333;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.placeholder {
  width: 40px;
}

.search-bar {
  padding: 12px;
  background-color: #fff;
}

.search-input {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 8px 16px;
}

.search-icon {
  font-size: 16px;
  margin-right: 8px;
  color: #999;
}

.search-input input {
  flex: 1;
  border: none;
  background-color: transparent;
  font-size: 14px;
  color: #333;
}

.filter-section {
  background-color: #fff;
  padding: 0 12px;
  margin-bottom: 10px;
}

.filter-tabs {
  display: flex;
  height: 44px;
}

.filter-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666;
  position: relative;
}

.filter-tab.active {
  color: #007aff;
}

.filter-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 2px;
  background-color: #007aff;
}

.review-list {
  flex: 1;
  overflow-y: auto;
}

.review-item {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 16px;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.review-time {
  font-size: 12px;
  color: #999;
}

.service-code {
  font-size: 12px;
  color: #666;
}

.star-rating {
  margin-bottom: 12px;
}

.rating-container {
  display: flex;
  align-items: center;
}

.rating-label {
  font-size: 14px;
  color: #666;
  margin-right: 8px;
}

.stars {
  display: flex;
  margin-right: 8px;
}

.star {
  font-size: 16px;
  color: #ddd;
  margin-right: 2px;
}

.star.active {
  color: #ffcc00;
}

.rating-score {
  font-size: 14px;
  color: #ff6600;
  font-weight: 600;
}

.review-content {
  margin-bottom: 12px;
}

.content-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.service-info {
  margin-bottom: 12px;
}

.service-label {
  font-size: 14px;
  color: #666;
}

.service-text {
  font-size: 14px;
  color: #333;
  margin-left: 4px;
}


</style>